<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Upixels</title>
	<script src="./js/panoviewer_pack.js"></script>
	<script src="./js/event_handle.js"></script>

	<script src="./js/jquery-3.1.1.js"></script>
	<script src="./js/jsStyle.js"></script>
	
	<style>
		body{height:100%;overflow:hidden;padding:0;margin:0;background:black;}
		html{height:100%;overflow:hidden;padding:0;margin:0;font-family:Arial;font-size:12px;color:white;-webkit-text-size-adjust:none}
	</style>
</head>

<body>
<div id="testmodule">
	<canvas id="canvas" style="position:absolute;width: 100%;height: 100%">
	</canvas>

	<div id="control">
		<div id="all">
			<div id="imgplay">
				<img id="showplay">
			</div>

			<span class="time_past mid-time">0:00</span>

			<div class="progress">
				<div class="load"></div>
				<div class="circle"></div>
			</div>

			<span class="time_all mid-time">0:00</span>

		

		</div>
	</div>


</div>

<script type="text/javascript">  
    upixelsPanoViewer('canvas','pano.mp4');
	 updateModel(1);
        var winWidth = 0;  
        var winHeight = 0;  
        function findDimensions() { //函数：获取尺寸  
            //获取窗口宽度  
            if (window.innerWidth) {  
                winWidth = window.innerWidth;  
            }  
            else if ((document.body) && (document.body.clientWidth)) {  
                winWidth = document.body.clientWidth;  
            }  
            //获取窗口高度  
            if (window.innerHeight) {  
                winHeight = window.innerHeight;  
            }  
            else if ((document.body) && (document.body.clientHeight)) {  
                winHeight = document.body.clientHeight;  
            }  
            //通过深入Document内部对body进行检测，获取窗口大小  
            if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {  
                winHeight = document.documentElement.clientHeight;  
                winWidth = document.documentElement.clientWidth;  
            }    
            
              document.getElementById("testmodule").style.height = winHeight + "px";
               document.getElementById("testmodule").style.width = winWidth + "px";
               
               
               
            //设置div的具体宽度=窗口的宽度的%  
          
                 if(winWidth>winHeight){
               
                    document.getElementById("control").style.width = winWidth + "px";
                    document.getElementById("control").style.position='absolute';
                    document.getElementById("control").style.background='rgba(0,0,0,0.5)';
                    document.getElementById("control").style.color='#fff';
                    document.getElementById("control").style.bottom='0px';
                 	document.getElementById("control").style.height=winHeight/5+ "px";
                    document.getElementById("all").style.height=winHeight/5+ "px";
                 }else{
                    document.getElementById("control").style.fontSize='10px';
                    document.getElementById("control").style.width = winWidth + "px";
                    document.getElementById("control").style.position='absolute';
                    document.getElementById("control").style.background='rgba(0,0,0,0.5)';
                    document.getElementById("control").style.color='#fff';
                    document.getElementById("control").style.bottom='0px';
                 	document.getElementById("control").style.height=winHeight/10+ "px";
                 	document.getElementById("all").style.height=winHeight/10+ "px";
                 }
                 
                 
                      document.getElementById("all").style.background='rgba(0,0,0,0.5)';
                 	  document.getElementById("all").style.width = winWidth + "px";

                 	  document.getElementById("all").style.display='flex';
                 	  document.getElementById("all").style.alignItems='center';
                 	  document.getElementById("all").style.justifyContent='center';
                 	  
                 	    //播放按钮样式 占整体长度的10%

                      document.getElementById("imgplay").style.width=winWidth/10 + "px";
                      document.getElementById("imgplay").style.textAlign='center';
	                  document.getElementById("showplay").style.width=winWidth/30 + "px";
	                  document.getElementById("showplay").src= "./pause.png";
	                  document.getElementById("showplay").style.marginLeft=winWidth/35 + "px";

            
        }  
        findDimensions();  
        window.onresize = findDimensions;  
    </script>  










<!--<script>
	 upixelsPanoViewer('canvas','pano.mp4');
	 updateModel(1);
    var resizeTimer = null;
	 doResize();
	  //监听浏览器宽度的改变
                window.onresize = function(){
                    doResize();
                };
	function doResize(){
  alert("333");
	panoviewer_update_quat(quat, fovy, distance);
		resizeTimer = null;


		var winWidth = 0;
        var winHeight = 0;

            //获取窗口宽度
            if (window.innerWidth) {
                winWidth = window.innerWidth;
            }
            else if ((document.body) && (document.body.clientWidth)) {
                winWidth = document.body.clientWidth;
            }
            //获取窗口高度
            if (window.innerHeight) {
                winHeight = window.innerHeight;
            }
            else if ((document.body) && (document.body.clientHeight)) {
                winHeight = document.body.clientHeight;
            }
            //通过深入Document内部对body进行检测，获取窗口大小
            if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
                winHeight = document.documentElement.clientHeight;
                winWidth = document.documentElement.clientWidth;
            }




               document.getElementById("testmodule").style.height = winHeight + "px";
               document.getElementById("testmodule").style.width = winWidth + "px";



                 if(winWidth>winHeight){//横屏
  alert("111");
                 	document.getElementById("control").style.width = winWidth + "px";
                    document.getElementById("control").style.position='absolute';
                    document.getElementById("control").style.background='rgba(0,0,0,0.5)';
                    document.getElementById("control").style.color='#fff';
                    document.getElementById("control").style.bottom='0px';
                 	document.getElementById("control").style.height=winHeight/5+ "px";
                    document.getElementById("all").style.height=winHeight/5+ "px";
//                  document.getElementById("showmodle").style.bottom=winHeight/5+ "px";
//                  document.getElementById("showmodle").style.fontSize='14px';
//                  document.getElementById("showmodle").style.width='160px';
//                  document.getElementById("showmodle").style.height='175px';
               }else{//竖屏
               	  alert("111");
                    document.getElementById("control").style.fontSize='10px';
                 	document.getElementById("showeye").style.fontSize='10px';
//                  document.getElementById("showorhide").style.fontSize='10px';
                    document.getElementById("control").style.width = winWidth + "px";
                    document.getElementById("control").style.position='absolute';
                    document.getElementById("control").style.background='rgba(0,0,0,0.5)';
                    document.getElementById("control").style.color='#fff';
                    document.getElementById("control").style.bottom='0px';
                 	document.getElementById("control").style.height=winHeight/10+ "px";
                 	document.getElementById("all").style.height=winHeight/10+ "px";
//               	document.getElementById("showmodle").style.bottom=winHeight/10+ "px";
//                  document.getElementById("showmodle").style.fontSize='10px';
//                  document.getElementById("showmodle").style.width='60px';
//                  document.getElementById("showmodle").style.height='175px';
                 }


                      document.getElementById("all").style.background='rgba(0,0,0,0.5)';
                 	  document.getElementById("all").style.width = winWidth + "px";

                 	  document.getElementById("all").style.display='flex';
                 	  document.getElementById("all").style.alignItems='center';
                 	  document.getElementById("all").style.justifyContent='center';


                 //播放按钮样式 占整体长度的10%

                      document.getElementById("imgplay").style.width=winWidth/10 + "px";
                      document.getElementById("imgplay").style.textAlign='center';
	                  document.getElementById("showplay").style.width=winWidth/30 + "px";
	                  document.getElementById("showplay").src= "./play.png";
	                  document.getElementById("showplay").style.marginLeft=winWidth/35 + "px";




                //最右边两个按钮样式 占整体长度的20%
//                    document.getElementById("rightshow").style.width=winWidth/5+ "px";
//	 	              document.getElementById("rightshow").style.float='left';

//	 	              document.getElementById("imgeye").style.width=winWidth/11+ "px";
//	 	              document.getElementById("imgeye").style.float='left';
	 	              document.getElementById("showeye").style.width=winWidth/11+ "px";
	 	              document.getElementById("showeye").style.textAlign='center';

//                    document.getElementById("imghide").style.width=winWidth/11+ "px";
//                    document.getElementById("imghide").style.float='left';
//                    document.getElementById("showorhide").style.width=winWidth/11+ "px";
//                    document.getElementById("showorhide").style.textAlign='center';


                  //弹出选择模式框样式

//
//                    document.getElementById("showmodle").style.borderBottom='1px';
//                    document.getElementById("showmodle").style.textAlign='center';
//                    document.getElementById("showmodle").style.right='20px';




	}


//	 window.onresize = function(){
//		if( resizeTimer == null) {
//			resizeTimer = setTimeout("doResize()",1000);
//		}
//
//	}

</script>-->
</body>
</html>
